<template>
  <div id="qualityControldChart" class="mainContent">
    <div class="headers clearfix">
      <vue-datepicker-local
        v-model="emptyTime"
        format="YYYY-MM"
        clearable
        :placeholder="'请选择时间范围'"
      />
      <button class="pull-right" @click="addQualityControld">新增</button>
    </div>
    <div class="countTbale" v-if="qualityData.length">
      <div class="countThead">
        <table class="table">
          <thead>
            <tr>
              <th class="text-center" width="40%">重症质控指标</th>
              <th
                v-for="(item,index) in qualityData"
                class="text-center"
                width="10%"
                :data-id="item.ID"
                @click="editQualityControld($event)"
              >{{item.QCInfoDate | formatDate}}</th>
            </tr>
          </thead>
        </table>
      </div>
      <div class="countTbody">
        <table class="table table-striped">
          <tbody>
            <tr>
              <td width="40%">1.ICU床位率</td>
              <td
                v-for="(item,index) in qualityData"
                class="text-center"
                width="10%"
              >{{item.BedRatio }}%</td>
            </tr>
            <tr>
              <td width="40%">2.ICU医师床位比</td>
              <td
                v-for="(item,index) in qualityData"
                class="text-center"
                width="10%"
              >{{item.DoctorBedRatio }}</td>
            </tr>
            <tr>
              <td width="40%">3.ICU护士床位比</td>
              <td
                v-for="(item,index) in qualityData"
                class="text-center"
                width="10%"
              >{{item.NurseBedRatio }}</td>
            </tr>
            <tr>
              <td width="40%">4.ICU患者收治率</td>
              <td
                v-for="(item,index) in qualityData"
                class="text-center"
                width="10%"
              >{{item.PatientRatio }}%</td>
            </tr>
            <tr>
              <td width="40%">5.APACHE II评分≥15分患者收治率(24小时内)</td>
              <td
                v-for="(item,index) in qualityData"
                class="text-center"
                width="10%"
              >{{item.ApacheII15Ratio }}%</td>
            </tr>
            <tr>
              <td width="40%">6.ICU患者收治床日率</td>
              <td
                v-for="(item,index) in qualityData"
                class="text-center"
                width="10%"
              >{{item.PatientBedDayRatio }}%</td>
            </tr>
            <tr>
              <td width="40%">7.感染性休克3h集束化治疗（bundle）完成率</td>
              <td
                v-for="(item,index) in qualityData"
                class="text-center"
                width="10%"
              >{{item.SepsisBundle3HRatio }}%</td>
            </tr>
            <tr>
              <td width="40%">8.感染性休克6h集束化治疗（bundle）完成率</td>
              <td
                v-for="(item,index) in qualityData"
                class="text-center"
                width="10%"
              >{{item.SepsisBundle6HRatio }}%</td>
            </tr>
            <tr>
              <td width="40%">9.抗菌药物治疗前病原学送检率</td>
              <td
                v-for="(item,index) in qualityData"
                class="text-center"
                width="10%"
              >{{item.AntibacterialCheckRatio }}%</td>
            </tr>
            <tr>
              <td width="40%">10.深静脉血栓（DVT）预防率</td>
              <td
                v-for="(item,index) in qualityData"
                class="text-center"
                width="10%"
              >{{item.DVTRatio }}%</td>
            </tr>
            <tr>
              <td width="40%">11.ICU患者实际病死率</td>
              <td
                v-for="(item,index) in qualityData"
                class="text-center"
                width="10%"
              >{{item.DeadRatio }}%</td>
            </tr>
            <tr>
              <td width="40%">12.ICU患者预计病死率</td>
              <td
                v-for="(item,index) in qualityData"
                class="text-center"
                width="10%"
              >{{item.EstimatedDeadRatio }}%</td>
            </tr>
            <tr>
              <td width="40%">13.ICU重症患者标化病死指数（StandardizedMortality Ratio）</td>
              <td
                v-for="(item,index) in qualityData"
                class="text-center"
                width="10%"
              >{{item.StandardizedMorthalityRatio }}%</td>
            </tr>
            <tr>
              <td width="40%">14.非计划转入ICU率</td>
              <td
                v-for="(item,index) in qualityData"
                class="text-center"
                width="10%"
              >{{item.UnPlanInICURatio }}%</td>
            </tr>
            <tr>
              <td width="40%">15.转出ICU后 48h 内重返率</td>
              <td
                v-for="(item,index) in qualityData"
                class="text-center"
                width="10%"
              >{{item.ReInICU48Ratio }}%</td>
            </tr>
            <tr>
              <td width="40%">16.非计划气管插管拔管率</td>
              <td
                v-for="(item,index) in qualityData"
                class="text-center"
                width="10%"
              >{{item.UnPlanTracheaIsueRatio }}%</td>
            </tr>
            <tr>
              <td width="40%">17.气管插管拔管后48h内再插管率</td>
              <td
                v-for="(item,index) in qualityData"
                class="text-center"
                width="10%"
              >{{item.RedoTrachea48HRatio }}%</td>
            </tr>
            <tr>
              <td width="40%">18.ICU呼吸机相关性肺炎（VAP）发病率</td>
              <td
                v-for="(item,index) in qualityData"
                class="text-center"
                width="10%"
              >{{item.VAPRatio }}‰</td>
            </tr>
            <tr>
              <td width="40%">19.ICU血管内导管相关血流感染（CRBSI）发病率</td>
              <td
                v-for="(item,index) in qualityData"
                class="text-center"
                width="10%"
              >{{item.CRBSIRatio }}‰</td>
            </tr>
            <tr>
              <td width="40%">20.ICU导尿管相关泌尿系感染（CAUTI）发病率</td>
              <td
                v-for="(item,index) in qualityData"
                class="text-center"
                width="10%"
              >{{item.CAUTIDaysRatio }}‰</td>
            </tr>
          </tbody>
        </table>
      </div>
      <mo-paging
        class="headers"
        :page-index="currentPage"
        :total="RecordCount"
        :page-size="pageSize"
        @change="pageChange"
      ></mo-paging>
    </div>
    <loading v-if="isShow && qualityData.length== 0"></loading>
    <noSearch v-if="!isShow && qualityData.length == 0"></noSearch>
  </div>
</template>
<script>
import { standardDate, formatDate } from "@/components/common/date"; //引入时间转换JS
import { apiGetCCQCReportList } from "@/api/api";
import VueDatepickerLocal from "@/components/datepicker/VueDatepickerLocal"; //引入时间组件
import MoPaging from "@/components/paging/paging"; //引入分页组件
import loading from "@/components/loading/loading";
import noSearch from "@/components/search/noSearch"; //导入没有搜索结果组件
export default {
  data() {
    return {
      pageSize: 6, //每页显示6条数据
      currentPage: 1, //当前页码
      isShow: true,
      RecordCount: 0, //总记录数
      emptyTime: [],
      startDate: "",
      endDate: "",
      qualityData: []
    };
  },
  mounted() {
    this.GetCCQCReportList();
  },
  watch: {
    emptyTime: {
      handler(curVal, oldVal) {
        if (
          standardDate(curVal[0]) == "NaN-NaN-NaN" ||
          standardDate(curVal[1]) == "NaN-NaN-NaN"
        ) {
          this.startDate = "";
          this.endDate = "";
          this.isShow = true;
          this.qualityData = [];
          this.GetCCQCReportList();
        } else {
          this.startDate = standardDate(curVal[0]);
          this.endDate = standardDate(curVal[1]);
          this.isShow = true;
          this.qualityData = [];
          this.GetCCQCReportList();
        }
      }
    }
  },
  methods: {
    GetCCQCReportList() {
      apiGetCCQCReportList({
        startDate: this.startDate,
        endDate: this.endDate,
        pageSize: this.pageSize,
        pageIndex: this.currentPage
      }).then(res => {
        if (res.ResultCode == -1) {
          this.isShow = false;
          this.qualityData = [];
        } else {
          this.isShow = true;
          this.qualityData = res.ListResult;
          this.RecordCount = res.RecordCount;
          //console.log(this.RecordCount)
          //console.log(res)
        }
      });
    },
    //从page组件传递过来的当前page
    pageChange(page) {
      this.currentPage = page;
      this.GetCCQCReportList();
    },
    addQualityControld() {
      //新增质控指标数据
      this.$router.push({
        path: "/qualityControl/qualityControldDetails",
        query: { item: 2, status: 0 } //状态码为0时则为新增否则为编辑
      });
    },
    editQualityControld(e) {
      //编辑质控指标数据
      let ID = e.currentTarget.getAttribute("data-id");
      this.$router.push({
        path: "/qualityControl/qualityControldDetails",
        query: { item: 2, status: 1, id: ID } //状态码为1时则为编辑否则为新增
      });
      //console.log(ID)
    }
  },
  filters: {
    formatDate(time) {
      if (time == "") {
        return "";
      } else {
        var date = new Date(parseInt(time.substring(6, 19)));
        return formatDate(date, "yyyy-MM");
      }
    }
  },
  components: {
    loading,
    noSearch,
    VueDatepickerLocal,
    MoPaging
  }
};
</script>
<style scoped>
#qualityControldChart {
  overflow-y: auto;
  padding: 15px;
}
.headers {
  margin-bottom: 15px;
  min-width: 460px;
}
.headers button {
  padding: 7px 15px;
  background-color: #11a7f3;
  color: #fff;
  vertical-align: middle;
  margin-right: 80px;
}
.countTbale {
  height: calc(100% - 120px);
  /* margin: 0 20px; */
}

.datepicker {
  margin-left: 60px;
  vertical-align: middle;
}

.table > thead > tr > th {
  border-bottom: none;
}

.table > thead > tr > th {
  border-bottom: none;
}

.countThead,
.countTbody {
  width: 97%;
  min-width: 800px;
  margin: 0 auto;
  /*border:1px solid #f4f4f4;*/
  border-top: none;
}

.countTbody {
  border: 1px solid #ddd;
  border-top: 0;
}

.table {
  margin-bottom: 0;
}

.countThead thead tr {
  height: 42px;
  line-height: 42px;
  background-color: #11a7f3;
  color: #fff;
}

.countThead > thead > tr > th {
  border-bottom: none;
}

.countTbody {
  max-height: calc(100% - 50px);
  overflow-y: auto;
}

.countTbody tbody tr td {
  vertical-align: middle;
  border-top: 1px solid #ddd;
  color: #333;
  border-right: 1px solid #ddd;
}

.countTbody tbody tr td:last-child {
  border-right: none;
}

.countTbody tbody > tr:first-child > td {
  border-top: none;
}
@media screen and (max-width: 768px) {
  .datepicker{
    margin-left: 15px;
  }
}
@media screen and (max-width: 425px) {
}
</style>
